<template>
  <div class="userList el-row--flex">
    <el-table
      ref="table"
      :height="tableHeight"
      :data="userList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
    >
      <el-table-column label="" width="50" />
      <el-table-column prop="realName" label="姓名" sortable />
      <el-table-column prop="userName" label="账号" />
      <el-table-column prop="deptName" label="部门" />
      <el-table-column prop="roleNames" label="角色" />
      <el-table-column prop="roleNames" label="操作">
        <template slot-scope="scope">
          <Popconfirm
            message="确认删除该用户？"
            :confirm-callback="userDelete"
            :data="scope.row"
          >
            <template>
              <a
                class="el-icon-delete"
                style="margin-right:10px;    padding: 5px;"
              />
            </template>
          </Popconfirm>
          <a
            class="el-icon-setting"
            @click.prevent.stop="setRole(scope.row.userId, scope.row.roleIds)"
          />
        </template>
      </el-table-column>
    </el-table>

    <setRole
      ref="setRole"
      :set-role-data="setRoleData"
      @colseDialog="colseDialog"
    />
  </div>
</template>

<script>
import { getUserListByProject, userDelete } from '@/api/jurisdiction'
import setRole from './setRole'
export default {
  name: 'UserList',
  filters: {},
  components: { setRole },
  data() {
    return {
      userList: [],
      roleId: null,
      tableHeight: 50,
      setRoleData: {
        dialogFormVisible: false,
        userId: '',
        roleIds: ''
      }
    }
  },
  computed: {},
  mounted: function() {
    this.$nextTick(function() {
      const height = document.querySelector('.app-main').offsetHeight
      this.tableHeight = height - this.$refs.table.$el.offsetTop - 50

      console.log(this.tableHeight)
      // 监听窗口大小变化
      const self = this
      window.onresize = function() {
        self.tableHeight = height - self.$refs.table.$el.offsetTop - 50
      }
    })
    // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
    // 50表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
  },
  methods: {
    getUserListByProject() {
      console.log()
      getUserListByProject()
        .then(result => {
          const { data } = result
          this.userList = data
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    userDelete(row) {
      userDelete(row.id)
        .then(result => {
          this.userList.splice(
            this.userList.findIndex(v => v.userId === row.id),
            1
          )
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    setRole(userId, roleIds) {
      this.$refs.setRole.getRoleList()
      this.setRoleData = {
        dialogFormVisible: true,
        userId,
        roleIds
      }
    },
    colseDialog() {
      this.setRoleData.dialogFormVisible = false
      setTimeout(() => {
        this.getUserListByProject()
      }, 300)
    }
    // handleChange(folderId, bloon, type) {
    //   roleUpdateFolder(this.roleId, folderId, type, bloon)
    //     .then(result => {
    //       console.log(result)
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // }
  }
}
</script>

<style lang="scss" scoped>
.userList {
  flex: 1;

  thead {
    width: 100%;
    height: 70px;
    background: rgba(105, 194, 233, 0.2);
    border-radius: 10px;
  }
}
</style>
      <style lang="scss">
.userList {
  thead {
    width: 100%;
    height: 70px;
    border-radius: 10px;
    tr,
    th {
      background: rgba(105, 194, 233, 0.2);

      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(44, 161, 213, 1);

      padding: 0;

      .cell {
        line-height: 70px;
      }
    }

    tr {
      border-radius: 10px;
      th:first-child {
        border-radius: 10px 0 0 0;
      }
      th:nth-last-child(2) {
        border-radius: 0 10px 0 0;
      }
    }
  }

  .is-current{
    .el-tree-node__content{
      background-color: #fff;
    }
  }
}
</style>
